<template>
  <mars-dialog :draggable="true" title="底图" :width="380" :position="{ top: 60, right: 10 }">
    <ul class="basemap">
      <li v-for="(item, i) in baseMaps" :key="i" class="basemap-card" :class="{ 'active-card': active === item.id }">
        <div><img class="icon" :src="`${item.options.icon || 'img/basemaps/bingAerial.png'}`" /></div>
        <div>{{ item.name }}</div>
      </li>
    </ul>
  </mars-dialog>
</template>

<script setup lang="ts">
import { ref, markRaw, onMounted } from "vue"
import useLifecycle from "@/common/uses/use-lifecycle"
import * as mapWork from "./map"
import { MapCfgItem } from "@/widgets/manage-basemap/mapCfg"

// 启用map.ts生命周期
useLifecycle(mapWork)

const baseMaps = ref<any[]>([])
const active = ref("")

onMounted(() => {
  const layers = mapWork.getLayers()
})

</script>
<style lang="less" scoped>
.basemap {
  height: calc(100% - 40px);
}

.basemap-card {
  display: inline-block;
  width: 75px;
  list-style-type: none;
  margin-top: 10px;
  margin-left: 10px;
  vertical-align: top;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  color: var(--mars-text-color);

  &:hover {
    .active-card();
  }

  .icon {
    border: 1px solid #4db3ff78;
    width: 75px;
    height: 70px;
    padding: 1px;
  }
}

.active-card {
  color: #337fe5 !important;

  .icon {
    border-color: #337fe5;
  }
}
</style>
